<template>
  <div class="personal">
    <UserInfo></UserInfo>
    <a-tabs v-model:activeKey="activeKey" tab-position="left" centered>
      <a-tab-pane key="3" tab="修改信息">
        <div>
          <a-form
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 16 }"
            :model="userupdate"
            name="basic"
            autocomplete="off"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
          >
            <a-form-item
              label="userName"
              name="userName"
              :rules="[
                { required: true, message: 'Please input your userName!' },
              ]"
            >
              <a-input v-model:value="userupdate.userName" />
            </a-form-item>

<!--            <a-form-item-->
<!--              label="userAvatar"-->
<!--              name="userAvatar"-->
<!--              :rules="[-->
<!--                { required: false, message: 'Please input your userAvatar!' },-->
<!--              ]"-->
<!--            >-->
<!--              <a-input v-model:value="userupdate.userAvatar" />-->
<!--            </a-form-item>-->

            <a-form-item
              label="userProfile"
              name="&nbsp;userProfile"
              :rules="[
                { required: false, message: 'Please input your userName!' },
              ]"
            >
              <a-input v-model:value="userupdate.userProfile" />
            </a-form-item>

            <a-form-item :wrapper-col="{ offset: 14, span: 16 }">
              <a-space>
                <a-button type="primary" html-type="submit">Submit</a-button>
              </a-space>
            </a-form-item>
          </a-form>
        </div>
      </a-tab-pane>
      <a-tab-pane key="1" tab="我的文章">
        <a-empty v-if="postList.length == 0" />
        <PostList v-else :post-list="postList" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="我的代码" force-render>
        <a-empty v-if="codeList.length == 0" />
        <CodeList v-else :code-list="codeList" />
      </a-tab-pane>
      <a-tab-pane key="4" tab="我的简历">
        <a-empty />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
import myAxios from "@/plugins/myAxios";
import { onBeforeMount, ref } from "vue";
import router from "@/router";
import { message } from "ant-design-vue";

import UserInfo from "@/components/Personal/Info.vue";
import PostList from "@/components/List/PostList.vue";
import CodeList from "@/components/List/CodeList.vue";

const activeKey = ref("3");
let user = ref({
  id: "",
  userName: "",
  userAvatar: "",
  userProfile: "",
  userRole: "",
  createTime: "",
  updateTime: "",
});
let userupdate = ref({
  userAvatar: "",
  userName: "",
  userProfile: "",
});
const getLoginUser = async () => {
  await myAxios.get("user/get/login").then((res: any) => {
    if (res !== null) {
      user.value = res;
      userupdate.value.userName = res.userName;
      userupdate.value.userProfile = res.userProfile;
      userupdate.value.userAvatar = res.userAvatar;
    } else {
      router.push("/403");
    }
  });
};

onBeforeMount(() => {
  getLoginUser();
});
// const editNow = () => {
//   alert("editNow");
// };
const onFinish = (values: any) => {
  myAxios.post("/user/update/my", userupdate.value).then((res: any) => {
    if (res) {
      message.success("个人信息修改成功");
      router.go(0);
    } else {
      message.error("修改失败");
    }
  });
};

const onFinishFailed = (errorInfo: any) => {
  message.error("用户名不能为空");
};

let postList = ref([]);
let codeList = ref([]);

const getMylist = () => {
  const post = ref({
    id: user.value.id,
  });
  myAxios.post("/post/my/list/page/vo", post).then((res: any) => {
    console.log(res);
    postList = res.records;
  });
  myAxios.post("/code/my/list/page/vo", post).then((res: any) => {
    console.log(res);
    codeList = res.records;
  });
};

onBeforeMount(() => {
  getMylist();
});
</script>

<style scoped lang="less">
.personal {
  //width: 90vw;
  //background-color: #e50f0f;
  opacity: 0.8;
}
</style>
